<template>
  <div class="block-padding">
    <div class="title-wrap">
      <h3 class="title">{{title}}</h3>

    </div>
    <div class="block-content">
      <ul>
        <li>
          <router-link to="/home/hot" >热歌榜</router-link>
        </li>
        <li>
          <router-link to="/home/news">新歌榜</router-link>
        </li>
        <li>
          <router-link to="/home/king">King榜</router-link>
        </li>
      </ul>


    </div>

  </div>
</template>

<script>
    export default {
        name: "muisc_list_nav",
        props:{
          title:{
            type:String,
            default:''
          }
        },
        created(){

        }
    }
</script>

<style scoped lang="less">
  .block-padding{
    padding: 20px 17px 10px;
    background-color: #fff;
    margin-bottom: 10px;
    .title-wrap{
      display: flex;
      justify-content: space-between;
      h3{
        font-size: 18px;
        font-weight: 700;
        color: #2b2b2b;
      }
      span{
        font-size: 14px;
        position: relative;
        top: 2px;
        color: #2b2b2b;
      }
    }
    .block-content{
      margin-top: 15px;
       ul{
         display: flex;
         li{
           padding: 5px 0;
           flex: 1;
           text-align: center;
           align-items: center;
           a{
             color: #666;
             font-size: 14px;
           }
           .active{
             color: #e13228;
           }
         }
       }
    }

  }
</style>
